<script lang="tsx">
/**
 * 员工管理
 */
export default {
  name: "staff"
}
</script>

<script setup lang="tsx">


import {nextTick, ref, watch} from "vue";
import {definePageModel, PageModel, YyImage, ImgUpload, processRequest} from "@/framework";
import APIS from "@/apis";
import {useReflectionData} from "./use-refection-data.ts";
import {ElMessage, ElMessageBox} from "element-plus";

/**
 * 定义prop
 */
const props = defineProps<{
  /**
   * 部门节点id
   */
  nodeId: string
}>()

/**
 * 获取映射数据
 */
const {reflections, getReflectionData} = useReflectionData()
getReflectionData()

/**
 * 页面模型
 */
const pageModelRef = ref()
const config = definePageModel<any>({
  url: APIS.STAFF_RULE_BASE,
  getImmediate:true,
  otherParams:{
    departmentId:undefined
  },
  searchForm:{
    beforeSubmit(data){
      if (data.endTime){
        data.endTime += " 23:59:59"
      }
      return data
    },
    els:[
      {
        eType:"el-input",
        prop:"staff",
        props:{
          placeholder:"员工编码/员工",
          clearable:true
        }
      },
      {
        eType:"el-select",
        prop:"departmentId",
        props:{
          placeholder:"部门",
          clearable:true
        },
        optionsData:{
          reflect:"departmentList",
          label:"name",
          value:"id"
        }
      },
      {
        eType: "el-date-picker",
        prop: "startTime",
        props: {
          valueFormat: "YYYY-MM-DD",
          placeholder: "创建时间-起始",
          clearable: true
        }
      },
      {
        eType: "el-date-picker",
        prop: "endTime",
        props: {
          valueFormat: "YYYY-MM-DD",
          placeholder: "创建时间-起始",
          clearable: true
        }
      },
    ]
  },
  programForm:{
    els:[
      {
        label:"新增",
        eType:"el-button",
        props:{
          type:"primary"
        },
        event:"add"
      },
      {
        label: "删除",
        eType: "el-button",
        props: {
          type: "danger"
        },
        event: "delete-multi"
      },
    ]
  },
  table:{
    page:{
      enable:true,
      pageSize:20
    },
    selection:true,
    operation:{
      width:100,
      els:[
        {
          eType:"el-button",
          label:"编辑",
          event: "edit",
          props: {
            type: "primary",
            link: true
          }
        },
        {
          eType:"el-button",
          label:"删除",
          event: "delete",
          props: {
            type: "primary",
            link: true
          }
        },
      ]
    },
    props:{
      stripe:false,
      border:false
    },
    els:[
      {
        label:"员工编码",
        prop: "code",
        minWidth: 120
      },
      {
        label:"员工名称",
        prop: "name",
        minWidth: 120
      },
      {
        label: "员工头像",
        prop: "headImage",
        renderFn(row) {
          return <YyImage data={row.headImage} height={60} width={60}/>
        },
        minWidth: 140
      },
      {
        label: "账号",
        prop: "account",
        minWidth: 120
      },
      {
        label: "密码",
        prop: "password",
        minWidth: 120
      },
      {
        label: "部门名称",
        prop: "departmentName",
        minWidth: 120
      },
      {
        label: "创建时间",
        prop: "createTime",
        minWidth: 140,
        renderFn(data) {
          return <span>{data.createTime?.toDate()}</span>
        },
      }
    ]
  },
  form:{
    title: "新增/编辑",
    width:500,
    sheetForm:{
      labelWidth:"100px",
      required:['code','name','account','password'],
      els:[
        {
          label:"员工编码",
          prop: "code",
          eType: "el-input",
          props: {
            placeholder: "员工编码",
            clearable: true
          }
        },
        {
          label: "员工名称",
          prop: "name",
          eType: "el-input",
          props: {
            placeholder: "员工名称",
            clearable: true
          }
        },
        {
          label: "员工账号",
          prop: "account",
          eType: "el-input",
          props: {
            placeholder: "员工账号",
            clearable: true
          }
        },
        {
          label: "员工密码",
          prop: "password",
          eType: "el-input",
          props: {
            placeholder: "员工密码",
            clearable: true
          }
        },
        {
          label: "员工头像",
          renderFn(data: any) {
            /**
             * 监听修改
             */
            const handleChange = (value: any) => {
              data.headImage = value
            }

            return <ImgUpload onChange={handleChange} data={data.headImage} limit={1}/>
          }
        },
        {
          label: "部门",
          eType: "el-select",
          prop: "departmentId",
          props: {
            placeholder: "部门",
            clearable: true
          },
          optionsData: {
            reflect: "departmentList",
            label: "name",
            value: "id"
          }
        },
      ]
    }
  }
})

/**
 * 新增
 */
const handleAdd = () => {
  pageModelRef.value.handleAdd()
}

/**
 * 编辑
 */
const handleEdit = (row: any) => {
  pageModelRef.value.handleEdit(row)
}

/**
 * 删除
 */
const handleDelete = (row: any) => {
  pageModelRef.value.handleDelete(row)
}

/**
 * 刷新表格
 */
const handleRefresh = () => {
  pageModelRef.value.refreshTableData()
}

/**
 * 删除 - 批量
 */
const handleDeleteMulti = async () => {
  const selectData = pageModelRef.value.getTableSelectData()
  if (!selectData) {
    ElMessage.warning("请先选择一条数据")
    return false
  }
  await ElMessageBox.confirm("是否确认删除?", "删除", {
    type: "error"
  })
  await processRequest.delete('/api/Staff/DeleteMulti', {
    ids: selectData.map((item: any) => item.id)
  })

  ElMessage.success("删除成功")
  handleRefresh()
}

/**
 * 监听
 */
watch(()=>props.nodeId,(newValue)=>{
  if (newValue){
    if (config.otherParams){
      config.otherParams.departmentId = newValue
    }
    nextTick(()=>{
      handleRefresh()
    })
  }
})


</script>

<template>
  <PageModel ref="pageModelRef" :PageModel="config" :reflections="reflections" @add="handleAdd" @edit="handleEdit" @delete="handleDelete" @delete-multi="handleDeleteMulti"/>
</template>

<style scoped lang="scss">

</style>